<template>
  <div>
    <div class="navbar">
      <!-- 通知栏 -->
      <noticeBar></noticeBar>
      <!-- 标题盒子 -->
      <div class="navbar_titlebox clearfix">
        <!-- 标题左侧内容 -->
        <span>家政平台</span>
        <!-- 标题右侧按钮 -->
        <rightTopBtn class="rightTopBtn"></rightTopBtn>
      </div>
      <!-- 搜索框 -->
      <van-search v-model="formDate.searchText" placeholder="智能匹配" />
      <!-- 下拉选框 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="formDate.cityId" :options="arr0" />
      </van-dropdown-menu>
    </div>
    <!-- 县区 -->
    <LabelDisplay :text="'县区'" ref="clears1" @sonDate="sonDate" :list="arr1"></LabelDisplay>
    <!-- 职业类型 -->
    <LabelDisplay
      :text="'职业类型'"
      @sonDate="sonDate"
      ref="clears2"
      :list="arr2"
    ></LabelDisplay>
    <!-- 职业类型 -->
    <LabelDisplay
      :text="'信用等级'"
      @sonDate="sonDate"
       ref="clears3"
      :list="arr3"
    ></LabelDisplay>
    <!-- 职业类型 -->
    <LabelDisplay
      :text="'已认证客户数'"
       ref="clears4"
      @sonDate="sonDate"
      :list="arr4"
    ></LabelDisplay>
    <!-- 职业类型 -->
    <LabelDisplay
      :text="'职业类型'"
       ref="clears5"
      @sonDate="sonDate"
      :list="arr5"
    ></LabelDisplay>
    <!--  表单操作按钮-->
    <div class="tabelBtn">
      <van-button type="primary" round size="small" @click="clear">清除条件</van-button
      ><van-button type="primary" round size="small" @click="btnOK">确认筛选</van-button>
    </div>
    <span class="classsss" ref="aaa"></span>
  </div>
</template>

<script>
import noticeBar from '@/components/noticeBar'
import rightTopBtn from '@/components/rightTopBtn'
import LabelDisplay from './components/LabelDisplay.vue'
import { getSearchInfo, setSearchInfo } from '@/api/module/IntelligentSearch'
export default {
  name: 'IntelligentSearch',
  data () {
    return {
      arr0: [],
      arr1: [],
      arr2: [],
      arr3: [],
      arr4: [],
      arr5: [],
      formDate: {
        searchText: '',
        cityId: 0
      } // 要提交的表单
    }
  },
  created () {
    this.getSearchInfo()
  },
  methods: {
    async getSearchInfo () {
      try {
        const { data } = await getSearchInfo()
        this.arr0 = data[0]
        this.arr1 = data[1]
        this.arr2 = data[2]
        this.arr3 = data[3]
        this.arr4 = data[4]
        this.arr5 = data[5]
      } catch (error) {
        console.log('error: ', error)
      }
    },
    sonDate (value) {
      this.formDate = { ...this.formDate, ...value }
    },
    clear () {
      this.formDate = {
        searchText: '',
        cityId: 0
      }
      this.$refs.clears1.clear()
      this.$refs.clears2.clear()
      this.$refs.clears3.clear()
      this.$refs.clears4.clear()
      this.$refs.clears5.clear()
    },
    async btnOK () {
      try {
        await setSearchInfo(this.formDate)
        this.clear()
        this.$toast.success('筛选成功正在跳转页面')
      } catch (error) {
        console.log('error: ', error)
      }
    }
  },
  components: {
    noticeBar,
    rightTopBtn,
    LabelDisplay
  }
}
</script>

<style lang="less" scoped>
.navbar {
  width: 100%;
  height: 128 * 2px;
  background-color: #3F51B5;
  position: relative;
  .navbar_titlebox {
    font-size: 32px;
    padding: 70px 20px 0;
    color: #ffffff;
    .rightTopBtn {
      float: right;
      margin-top: 5px;
    }
  }
  .van-search {
    padding: 0;
    margin: 40px 120px 0 40px;
    overflow: hidden;
    border-radius: 10px;
    height: 60px;
    .van-search__content {
      background-color: #d7d7d5;
    }
  }
  /deep/.van-dropdown-menu {
    position: absolute;
    top: 2 * 75px;
    right: 2 * 10px;
    width: 120px;
    .van-dropdown-menu__bar {
      height: 60px;
      background-color: rgba(0, 0, 0, 0);
      .van-dropdown-menu__title {
        color: #d7d7d5;
        font-size: 28px;
      }
    }
    .van-popup--top {
      top: 0;
      width: 25%;
      left: 2 * 294px;
    }
  }
}
.tabelBtn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.van-button--small {
  height: 2 * 35px;
  padding: 0 2 * 55px;
  margin: 0 14px;
}
.van-button--primary {
  color: #fff;
  background-color: #3F51B5;
  border: 0.02667rem solid #3F51B5;
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
  *zoom: 1;
}
</style>
